@import 'icon';
@import '../../../styles/var';

@alert: ~'@{prefix}-alert';

.@{alert} {
  padding: 5px 0 5px 0;
  font-family: @font-family;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  font-size: 12px;
  color: @font-color;
  line-height: 20px;

  &.@{alert}-success,
  &.@{alert}-error,
  &.@{alert}-warning,
  &.@{alert}-info,
  &.@{alert}-help {
    padding: 5px 0 5px 19px;

    .@{alert}-icon {
      margin: 2px 4px 0 -20px;
    }
  }
}

.@{alert}-has-arrow {
  position: relative;

  .@{alert}-arrow {
    display: block;
  }
}

.@{alert}-arrow {
  display: none;

  &:before,
  &:after {
    width: 0;
    height: 0;
    border-style: solid;
    content: '';
    display: block;
    position: absolute;
  }
}

.@{alert}-placement-top-start,
.@{alert}-placement-top,
.@{alert}-placement-top-end {
  .@{alert}-arrow {
    position: absolute;
    transform: translate(-50%, 0);

    &:before,
    &:after {
      left: 50%;
      transform: translate(-50%, 0);
    }

    &:before {
      top: -7px;
      border-width: 0 7px 7px 7px;
      border-color: transparent transparent @border-color transparent;
    }

    &:after {
      top: -5.5px;
      border-width: 0 5.5px 5.5px 5.5px;
      border-color: transparent transparent @section-background transparent;
    }
  }

  .arrow(@type; @border-color; @background-color) {
    &.@{alert}-@{type} {
      .@{alert}-arrow {
        &:before {
          border-color: transparent transparent @border-color transparent;
        }

        &:after {
          border-color: transparent transparent @background-color transparent;
        }
      }
    }
  }

  .arrow(success; @success-lighter-color; @success-background);
  .arrow(error; @error-lighter-color; @error-background);
  .arrow(warning; @warning-lighter-color; @warning-background);
  .arrow(info; @info-lighter-color; @info-background);
  .arrow(help; @info-lighter-color; @info-background);

  .@{alert}-arrow {
    top: 0;
  }
}

.@{alert}-placement-bottom-start,
.@{alert}-placement-bottom,
.@{alert}-placement-bottom-end {
  .@{alert}-arrow {
    position: absolute;
    transform: translate(-50%, 0);

    &:before,
    &:after {
      left: 50%;
      transform: translate(-50%, 0);
    }

    &:before {
      top: 0;
      border-width: 7px 7px 0 7px;
      border-color: @border-color transparent transparent transparent;
    }

    &:after {
      top: 0;
      border-width: 5.5px 5.5px 0 5.5px;
      border-color: @section-background transparent transparent transparent;
    }
  }

  .arrow(@type; @border-color; @background-color) {
    &.@{alert}-@{type} {
      .@{alert}-arrow {
        &:before {
          border-color: @border-color transparent transparent transparent;
        }

        &:after {
          border-color: @background-color transparent transparent transparent;
        }
      }
    }
  }

  .arrow(success; @success-lighter-color; @success-background);
  .arrow(error; @error-lighter-color; @error-background);
  .arrow(warning; @warning-lighter-color; @warning-background);
  .arrow(info; @info-lighter-color; @info-background);
  .arrow(help; @info-lighter-color; @info-background);

  .@{alert}-arrow {
    bottom: 0;
  }
}

.@{alert}-placement-left-start,
.@{alert}-placement-left,
.@{alert}-placement-left-end {
  .@{alert}-arrow {
    position: absolute;
    transform: translate(0, -50%);

    &:before,
    &:after {
      top: 50%;
      transform: translate(0, -50%);
    }

    &:before {
      left: -7px;
      border-width: 7px 7px 7px 0;
      border-color: transparent @border-color transparent transparent;
    }

    &:after {
      left: -5.5px;
      border-width: 5.5px 5.5px 5.5px 0;
      border-color: transparent @section-background transparent transparent;
    }
  }

  .arrow(@type; @border-color; @background-color) {
    &.@{alert}-@{type} {
      .@{alert}-arrow {
        &:before {
          border-color: transparent @border-color transparent transparent;
        }

        &:after {
          border-color: transparent @background-color transparent transparent;
        }
      }
    }
  }

  .arrow(success; @success-lighter-color; @success-background);
  .arrow(error; @error-lighter-color; @error-background);
  .arrow(warning; @warning-lighter-color; @warning-background);
  .arrow(info; @info-lighter-color; @info-background);
  .arrow(help; @info-lighter-color; @info-background);

  .@{alert}-arrow {
    left: 0;
  }
}

.@{alert}-placement-right-start,
.@{alert}-placement-right,
.@{alert}-placement-right-end {
  .@{alert}-arrow {
    position: absolute;
    transform: translate(0, -50%);

    &:before,
    &:after {
      top: 50%;
      transform: translate(0, -50%);
    }

    &:before {
      left: 0;
      border-width: 7px 0 7px 7px;
      border-color: transparent transparent transparent @border-color;
    }

    &:after {
      left: 0;
      border-width: 5.5px 0 5.5px 5.5px;
      border-color: transparent transparent transparent @section-background;
    }
  }

  .arrow(@type; @border-color; @background-color) {
    &.@{alert}-@{type} {
      .@{alert}-arrow {
        &:before {
          border-color: transparent transparent transparent @border-color;
        }

        &:after {
          border-color: transparent transparent transparent @background-color;
        }
      }
    }
  }

  .arrow(success; @success-lighter-color; @success-background);
  .arrow(error; @error-lighter-color; @error-background);
  .arrow(warning; @warning-lighter-color; @warning-background);
  .arrow(info; @info-lighter-color; @info-background);
  .arrow(help; @info-lighter-color; @info-background);

  .@{alert}-arrow {
    left: 100%;
  }
}

.@{alert}-placement-top-start,
.@{alert}-placement-bottom-start {
  .@{alert}-arrow {
    margin-left: 14px;
    left: 0;
  }
}

.@{alert}-placement-top,
.@{alert}-placement-bottom {
  .@{alert}-arrow {
    left: 50%;
  }
}

.@{alert}-placement-top-end,
.@{alert}-placement-bottom-end {
  .@{alert}-arrow {
    margin-left: -14px;
    left: 100%;
  }
}

.@{alert}-placement-left-start,
.@{alert}-placement-right-start {
  .@{alert}-arrow {
    margin-top: 14px;
    top: 0;
  }
}

.@{alert}-placement-left,
.@{alert}-placement-right {
  .@{alert}-arrow {
    top: 50%;
  }
}

.@{alert}-placement-left-end,
.@{alert}-placement-right-end {
  .@{alert}-arrow {
    margin-top: -14px;
    top: 100%;
  }
}

.@{alert}-block {
  display: block;
}

.@{alert}-closing {
  height: 0 !important;
  overflow: hidden;
}

.@{alert}-border {
  background-color: @section-background;
  border: 1px solid @border-color;
  padding: 4px 11px 4px 11px;

  &.@{alert}-closable {
    padding: 4px 28px 4px 11px;
  }

  &.@{alert}-success,
  &.@{alert}-error,
  &.@{alert}-warning,
  &.@{alert}-info,
  &.@{alert}-help {
    padding: 4px 7px 4px 26px;

    &.@{alert}-closable {
      padding: 4px 28px 4px 26px;
    }
  }

  .border-and-close (@type; @background-color; @border-color; @close-color) {
    &.@{alert}-@{type} {
      background-color: @background-color;
      border: 1px solid @border-color;

      .@{alert}-close {
        &:focus {
          box-shadow: 0 0 0 2px @close-color;
        }

        &:focus,
        &:hover {
          .@{alert}-close-icon {
            &:before,
            &:after {
              background-color: @border-color;
            }
          }
        }
      }

      .@{alert}-close-icon {
        &:before,
        &:after {
          background-color: @close-color;
        }
      }
    }
  }

  .border-and-close
    (success; @success-background; @success-lighter-color; @success-light-color);
  .border-and-close
    (error; @error-background; @error-lighter-color; @error-light-color);
  .border-and-close
    (warning; @warning-background; @warning-lighter-color; @warning-light-color);
  .border-and-close
    (info; @info-background; @info-lighter-color; @info-light-color);
  .border-and-close
    (help; @info-background; @info-lighter-color; @info-light-color);
}

.@{alert}-close {
  width: 14px;
  height: 14px;
  float: right;
  right: 0;
  top: 0;
  margin: 3px -21px 0 0;
  display: block;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:after {
    margin-top: -17px;
    margin-left: -3px;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

.@{alert}-close-icon {
  transform: rotate(45deg);
  width: 14px;
  height: 14px;

  &:after,
  &:before {
    display: block;
    content: '';
    background-color: @border-color;
  }

  &:after {
    width: 14px;
    height: 2px;
    margin-top: -8px;
  }

  &:before {
    width: 2px;
    height: 14px;
    margin-left: 6px;
  }
}
